<template>
  <div style= "font-family: Hei">


    <!-- 轮播图-->
    <div style="margin:10px auto ;width: 1090px;">
      <template >
        <el-carousel :interval="5000" arrow="never" height="250px">
          <el-carousel-item v-for="show in showArr" style="display: flex;align-items: center;">
            <img style="width: 100%" :src="'http://176.17.10.223:18083/'+show.img" alt="">
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <!-- 资讯信息-->
    <div  style="margin:auto ;width: 1090px;overflow: hidden;text-align: center" >
      <div v-for="info in informationArr">
        <div style="height: 197px;width: 272px; float:left">
          <a style="text-decoration: none" :href="'/home/newsDetail?id='+info.id">
            <img :src="'http://176.17.10.223:18082/'+info.img" style="width: 263px;height:163px" alt="">
            <span style="margin: 10px;color: #3f3f3f">{{info.title.slice(0,12) + '...'}}</span>
          </a>
        </div>
      </div>
    </div>
    <!-- 物资信息-->
    <div style="margin:auto ;width: 1090px;">
      <!-- 物资标题-->
      <div style="height: 50px;text-align: center;font-size: 20px;position: relative;">

       <div style="height: 50px;width: 1090px;background-color: #6ae2e7;position: absolute;top: 5px; border-radius: 25px;"></div>
       <div style=" color:#6ae2e7;height: 48px;width: 1070px;background-color: white;position: absolute;top: 6px;left: 10px;border-radius: 25px">
         <p style="margin-top: 2px;margin-bottom: 0">SHOWDATA</p>
         <p style="margin: 0">物资信息展示</p>
       </div>
     </div>
      <!-- 物资详细信息-->
      <a style="text-decoration: none" href="/home/itemDetail">
        <div style="margin-top: 40px">
          <el-row :gutter="20">
            <el-col :span="6" v-for="p in itemArr">
              <el-card>
                <div>
                  <img class="p_img" :src="'http://176.17.10.223:18081/'+p.img" width="230" height="230" alt="">
                </div>
                <div>
                  <a style="color: #3f3f3f;text-decoration: none" :href="'/detail.html?id='+p.id">
                    <p style="font-size: 15px;margin-top: 0;height: 38px">{{p.name}}</p>
                  </a>
                  <div style="color: #6c6c6c">
                    <span style="float: right">库存:{{p.inventory}}件</span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </a>
    </div>
  </div>
</template>


<script>
  export default {
    data() {
      return {
        showArr:[],
        informationArr:[],
        itemArr:[]
      }
    },
    created() {
      this.getData();
    },

    methods: {
      getData(){
        this.user = JSON.parse(localStorage.getItem('user'))
        //获取所有轮播图信息
        this.axios.post("http://176.17.10.223:18083/show/selectList").then( (response)=> {
          this.showArr = response.data.data;
        })
        //获取所有资讯信息
        this.axios.post("http://176.17.10.223:18082/information/select-List").then( (response)=> {
          let information  = response.data.data;
          this.informationArr = information.slice(0,4)
        })
        //获取所有物资信息
        this.axios.post("http://176.17.10.223:18081/item/list?keyword=").then( (response)=> {
          this.itemArr = response.data.data;
        })
      },
    },
  }
</script>

<style>
  .p_img:hover{
    position: relative;
    bottom: 5px;
    /*元素的阴影:x偏移值 y偏移值 浓度 范围 颜色*/
    box-shadow: 0 0 10px 5px #333;
  }
</style>